﻿@{
    Layout = "~/Views/Shared/_Index.cshtml";
}
<script src="@SiteUrl.GetStaticResourceScriptUrl("~/js/highcharts/highcharts.js")"></script>
<script src="@SiteUrl.GetStaticResourceScriptUrl("~/js/highcharts/modules/exporting.js")"></script>
<script>
    var discharge = [];
    var visitper = [];

    $(function () {
        //浏览器窗口调整大小时重新加载jqGrid的宽
        $(window).resize(function () {
            initLayout("tabGrid");
        });

        var date = new Date();

        gridList();
    });

    function gridList() {
        var $gridList = $("#gridList");
        $gridList.newtouchLocalDataGrid({
            height: "auto",
            unwritten: false,
            autoScroll: false,
            autoHeight: true,
            colModel: [
                {
                    label: ' ', name: 'title', width: 150, align: 'center', cellattr: function (rowId, value, rowObject, colModel, arrData) {
                        return 'id=\'title' + rowId + "\'";
                    },
                },
                { label: '治疗师工号', name: 'gh', key: true, hidden: true },
                { label: '治疗师姓名', name: 'name', width: 60, align: 'left' },
                { label: '一月', name: 'Jan', width: 50, align: 'left' },
                { label: '二月', name: 'Feb', width: 50, align: 'left' },
                { label: '三月', name: 'Mar', width: 50, align: 'left' },
                { label: '四月', name: 'Apr', width: 50, align: 'left' },
                { label: '五月', name: 'May', width: 50, align: 'left' },
                { label: '六月', name: 'Jun', width: 50, align: 'left' },
                { label: '七月', name: 'Jul', width: 50, align: 'left' },
                { label: '八月', name: 'Aug', width: 50, align: 'left' },
                { label: '九月', name: 'Sep', width: 50, align: 'left' },
                { label: '十月', name: 'Oct', width: 50, align: 'left' },
                { label: '十一月', name: 'Nov', width: 50, align: 'left' },
                { label: '十二月', name: 'Dec', width: 50, align: 'left' }
            ], gridComplete: function () {
                Merger("gridList", 'title');
            },
        });
    }

    function Merger(gridName, CellName) {
        //得到显示到界面的id集合
        var mya = $("#" + gridName + "").getDataIDs();
        //当前显示多少条
        var length = mya.length;
        for (var i = 0; i < length; i++) {
            //从上到下获取一条信息
            var before = $("#" + gridName + "").jqGrid('getRowData', mya[i]);
            //定义合并行数
            var rowSpanTaxCount = 1;
            for (j = i + 1; j <= length; j++) {
                //和上边的信息对比 如果值一样就合并行数+1 然后设置rowspan 让当前单元格隐藏
                var end = $("#" + gridName + "").jqGrid('getRowData', mya[j]);
                if (before[CellName] == end[CellName]) {
                    rowSpanTaxCount++;
                    $("#" + gridName + "").setCell(mya[j], CellName, '', { display: 'none' });
                } else {
                    rowSpanTaxCount = 1;
                    break;
                }
                $("#" + CellName + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);
            }
        }
    }

    function ajaxlloaddata(orgId) {
        if (!orgId) {
            $.modalAlert("请选择医疗机构", 'warning');
            return;
        }
        var datatype;
        $('input[name="datatype"]').each(function () {
            $('#reset').css("display", "none");
            var $this = $(this);
            if ($this[0].checked) {
                datatype = $this.val();
            }
        });
        $.ajax({
            url: "/HighchartsManage/Outpatient/GetVisitNum?year=" + $("#Year").val() + "&datatype=" + datatype + "&orgId=" + $("#OrganizeId").val() + "&r=" + Math.random(),
            dataType: "json",
            async: false,
            success: function (data) {
                if (data.data) {
                    discharge = data.data.discharge;
                    visitper = data.data.visitper;
                    $("#gridList").resetSelection();
                    $("#gridList").clearGridData();
                    $("#gridList").newtouchLocalDataGrid(null, discharge);
                    $("#gridList").newtouchLocalDataGrid(null, visitper);
                }
            }
        });
        $('#container').highcharts({
            chart: {
                //marginRight: 120,
                zoomType: 'none',
                events: {
                    load: function () {
                        if (visitper != null && visitper.length<1) {
                            var series = {
                                name: "",
                                type: 'spline',
                                data: [0,
                                    0,
                                    0,
                                    0,
                                    0,
                                    0,
                                    0,
                                    0,
                                    0,
                                    0,
                                    0,
                                    0]
                            };
                            this.addSeries(series);
                        }

                        if (discharge != null && discharge.length < 1) {
                            var series = {
                                name: "",
                                type: 'column',
                                yAxis: 1,
                                data: [0,
                                    0,
                                    0,
                                    0,
                                    0,
                                    0,
                                    0,
                                    0,
                                    0,
                                    0,
                                    0,
                                    0]
                            };
                            this.addSeries(series);
                        }
                        for (var i = 0; i < visitper.length; i++) {
                            var series = {
                                name: visitper[i].name,
                                type: 'spline',
                                data: [visitper[i].Jan,
                                visitper[i].Feb,
                                visitper[i].Mar,
                                visitper[i].Apr,
                                visitper[i].May,
                                visitper[i].Jun,
                                visitper[i].Jul,
                                visitper[i].Aug,
                                visitper[i].Sep,
                                visitper[i].Oct,
                                visitper[i].Nov,
                                visitper[i].Dec],
                                tooltip: {
                                    headerFormat: '<span style="font-size:10px">{point.key}</span>',
                                    pointFormat: '<table><tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                        '<td style="padding:0"><b>{point.y}人</b></td></tr></table>',
                                    footerFormat: '<br />',
                                    shared: true,
                                    useHTML: true
                                },
                                events: {
                                    click: function (e) {
                                        if (datatype == "total") {
                                            $('#reset').css("display", "block");
                                            LoadMonthChart(e.point.x, datatype);
                                        }
                                    }
                                }
                            };
                            this.addSeries(series);
                        }


                        for (var i = 0; i < discharge.length; i++) {
                            var series = {
                                name: discharge[i].name,
                                type: 'column',
                                yAxis: 1,
                                data: [discharge[i].Jan,
                                discharge[i].Feb,
                                discharge[i].Mar,
                                discharge[i].Apr,
                                discharge[i].May,
                                discharge[i].Jun,
                                discharge[i].Jul,
                                discharge[i].Aug,
                                discharge[i].Sep,
                                discharge[i].Oct,
                                discharge[i].Nov,
                                discharge[i].Dec],
                                tooltip: {
                                    headerFormat: '<span style="font-size:10px">{point.key}</span>',
                                    pointFormat: '<table><tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                        '<td style="padding:0"><b>{point.y}元</b></td></tr></table>',
                                    footerFormat: '<br />',
                                    shared: true,
                                    useHTML: true
                                },
                                events: {
                                    click: function (e) {
                                        if (datatype == "total") {
                                            $('#reset').css("display", "block");
                                            LoadMonthChart(e.point.x, datatype);
                                        }
                                    }
                                }
                            };
                            this.addSeries(series);
                        }
                    }
                }
            },
            legend: {
                align: 'center',
                verticalAlign: 'bottom',
                x: 0,
                y: 0
            },
            title: {
                text: 'Revenue&Patient Visit per Theraplist'
            },
            xAxis: [{
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                crosshair: true
            }],
            yAxis: [{ // Primary yAxis
                labels: {
                    format: '{value} 人',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                title: {
                    text: '治疗人次',

                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                }
            }, { // Secondary yAxis
                title: {
                    text: '费用',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                labels: {
                    format: '{value}元',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                opposite: true
            }],
            tooltip: {
                shared: true
            },
        });
    }

    $("#btn_search").click(function () {
        ajaxlloaddata($('#OrganizeId').val());
    });

    function LoadMonthChart(month, datatype) {
        month++;
        $.ajax({
            url: "/HighchartsManage/Outpatient/GetMonthVisitNum?year=" + $("#Year").val() + "&datatype=" + datatype + "&orgId=" + $("#OrganizeId").val() + "&r=" + Math.random() + "&month=" + month,
            dataType: "json",
            async: false,
            success: function (data) {
                if (data.data) {
                    discharge = data.data.discharge;
                    GetMonthNumChart(data.data, month);
                }
            }
        });
    }

    function GetMonthNumChart(data, month) {
        var rtnobj = mGetData(data, month);
        var rtnvisitobj = mGetVisitData(data, month);
        $('#container').highcharts({
            chart: {
                zoomType: 'none',
                events: {
                    load: function () {
                        for (var i = 0; i < rtnvisitobj.datayxris.length; i++) {
                            var series = {
                                name: rtnvisitobj.datayxris[i].name,
                                type: 'spline',
                                data: rtnvisitobj.datayxris[i].fwrs,
                                tooltip: {
                                    headerFormat: '<span style="font-size:10px">{point.key}</span>',
                                    pointFormat: '<table><tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                        '<td style="padding:0"><b>{point.y}人</b></td></tr></table>',
                                    footerFormat: '<br />',
                                    shared: true,
                                    useHTML: true
                                }
                            };
                            this.addSeries(series);
                        }

                        for (var i = 0; i < rtnobj.datazlfy.length; i++) {
                            var series = {
                                name: rtnobj.datazlfy[i].name,
                                type: 'column',
                                yAxis: 1,
                                data: rtnobj.datazlfy[i].pjfy,
                                tooltip: {
                                    headerFormat: '<span style="font-size:10px">{point.key}</span>',
                                    pointFormat: '<table><tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                        '<td style="padding:0"><b>{point.y}元</b></td></tr></table>',
                                    footerFormat: '<br />',
                                    shared: true,
                                    useHTML: true
                                }
                            };
                            this.addSeries(series);
                        }
                    }
                }
            },
            legend: {
                align: 'center',
                verticalAlign: 'bottom',
                x: 0,
                y: 0
            },
            title: {
                text: 'Revenue&Patient Visit per Theraplist'
            },
            subtitle: {
                text: $('#Year').val() + "年" + month + "月费用人数详情",
            },
            xAxis: [{
                categories: rtnobj.str,
                crosshair: true
            }],
            yAxis: [{ // Primary yAxis
                labels: {
                    format: '{value} 人',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                title: {
                    text: '治疗人次',

                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                }
            }, { // Secondary yAxis
                title: {
                    text: '费用',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                labels: {
                    format: '{value}元',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                opposite: true
            }],
            tooltip: {
                shared: true
            },
        });
    }

    var weekday = new Array(7)
    weekday[0] = "日"
    weekday[1] = "一"
    weekday[2] = "二"
    weekday[3] = "三"
    weekday[4] = "四"
    weekday[5] = "五"
    weekday[6] = "六"

    function mGetData(data, month) {
        var rtnobj = {};
        rtnobj.str = [];
        rtnobj.datazlfy = [];
        var seriesgh = [];

        var date = new Date();
        var year = $('#Year').val(); /*date.getFullYear();*/
        var d = new Date(year, month, 0);
        var d = d.getDate();
        var currentdate = year + '-' + (month < 10 ? ('0' + month) : month);
        //循环获取图表所有series 就是所有治疗师
        $.each(data.discharge, function (i, v) {
            if (seriesgh.indexOf(v.gh) > -1) {
                return;
            }
            seriesgh.push(v.gh);
        });

        //再整合出每个治疗师1-30号每天的治疗情况
        $.each(seriesgh, function (i, v) {
            var obj = {};
            obj.pjfy = [];
            for (var iii = 1; iii < (d + 1); iii++) {
                var isPush = false;
                var currenttime = currentdate + '-' + (iii < 10 ? ('0' + iii) : iii);
                if (i == 0) {
                    rtnobj.str.push(iii + " " + weekday[new Date(currenttime).getDay()]);
                }
                $.each(data.discharge, function (ii, vv) {
                    if (v == vv.gh) {
                        if (obj.pjfy.length == 0) {
                            obj.name = vv.name;
                        }
                        if (vv.ssrq == currenttime) {
                            obj.pjfy.push(vv.zje);
                            isPush = true;
                        }
                    }
                });
                if (!isPush) {
                    obj.pjfy.push(0);
                }
            }
            rtnobj.datazlfy.push(obj);
        });
        return rtnobj;
    }

    function mGetVisitData(data, month) {
        var rtnvisitobj = {};
        rtnvisitobj.datayxris = [];
        var seriesgh = [];

        var date = new Date();
        var year = $('#Year').val(); /*date.getFullYear();*/
        var d = new Date(year, month, 0);
        var d = d.getDate();
        var currentdate = year + '-' + (month < 10 ? ('0' + month) : month);
        //循环获取图表所有series 就是所有治疗师
        $.each(data.visitper, function (i, v) {
            if (seriesgh.indexOf(v.gh) > -1) {
                return;
            }
            seriesgh.push(v.gh);
        });

        //再整合出每个治疗师1-30号每天的访问人数情况
        $.each(seriesgh, function (i, v) {
            var obj = {};
            obj.fwrs = [];
            for (var iii = 1; iii < (d + 1); iii++) {
                var isPush = false;
                var currenttime = currentdate + '-' + (iii < 10 ? ('0' + iii) : iii);
                $.each(data.visitper, function (ii, vv) {
                    if (v == vv.gh) {
                        if (obj.fwrs.length == 0) {
                            obj.name = vv.name;
                        }
                        if (vv.ssrq == currenttime) {
                            obj.fwrs.push(vv.yxris);
                            isPush = true;
                        }
                    }
                });
                if (!isPush) {
                    obj.fwrs.push(0);
                }
            }
            rtnvisitobj.datayxris.push(obj);
        });
        return rtnvisitobj;
    }
</script>
<div class="topPanel" style="border-bottom:1px solid rgb(221, 221, 221)">
    <table class="form" style="width: 700px;">
        <tr>
            <td class="formTitle">年份：</td>
            <td class="formValue">
                <input id="Year" type="text" class="form-control input-wdatepicker" onfocus="WdatePicker({dateFmt: 'yyyy',
    onpicked: function () { ajaxlloaddata($('#OrganizeId').val()); $dp.hide(); }
})" value="@DateTime.Now.ToString("yyyy")" />
            </td>
            <td class="formValue">
                <div class="btn-group" data-toggle="buttons" onchange="ajaxlloaddata($('#OrganizeId').val())">
                    <label class="btn btn-default active">
                        <input type="radio" name="datatype" id="datatype" checked="checked" class="toggle" value="total">总费用
                    </label>
                    <label class="btn btn-default">
                        <input type="radio" name="datatype" id="datatype" value="avg" class="toggle">平均费用
                    </label>
                </div>
            </td>
            <td></td>
        </tr>
    </table>
</div>
<div>
</div>
<div id="container" style="min-width:400px;height:300px"></div>
<input class="form-control btn btn-default" id="reset" type="button" value="重置" style="width: 50px;height: 25px;position: relative;top: -45px;right: -1050px;display:none">
<div style="margin-top:15px;" id="tabGrid">
    <table id="gridList" rel="tabGrid"></table>
</div>
<script type="text/javascript">
    function funcOrganizeIdChange() {
        ajaxlloaddata($('#OrganizeId').val());
    }
    $('#reset').click(function () {
        funcOrganizeIdChange();
        $('#reset').css("display", "none");
    });
</script>
@Html.Partial("_ReportOrganizeIdDDLSearchView")